{extend name="main"}
{block name="style"}
<style type="text/css">
.rounded-0 .el-input__inner{border:0;border-radius: 0;}
.min-300px{min-width: 300px;}
</style>
{/block}
{block name="body"}
<div class="bg-white mb-3">
	<el-form label-position="right" class="flex py-3">

	  <el-form-item label="客户端" prop="app_id" class="flex mb-0 pl-3">
		<el-select v-model="search.app_id" clearable placeholder="请选择客户端"
		@change="getAds('')">
			<el-option
			  :key="null"
			  label="全部"
			  :value="null">
			</el-option>
			<el-option
			  v-for="item in app_list"
			  :key="item.app_id"
			  :label="item.app_name"
			  :value="item.app_id">
			</el-option>
		</el-select>
	  </el-form-item>
	<el-button type="primary" plain size="mini" icon="el-icon-plus" @click="window.open('/ads/addPosition')" class="ml-3">添加广告位</el-button>

	  <el-form-item label="选择广告位" prop="id" class="flex mb-0 pl-3">
		<el-select v-model="search.id" placeholder="请选择广告位" filterable
		@change="getAds">
			<el-option
			  label="全部"
			  :value="''">
			</el-option>
			<el-option
			  v-for="item in ads_position_list"
			  v-if="!search.app_id||search.app_id===item.app_id"
			  :key="item.id"
			  :label="item.app_name+'-'+item.title"
			  :value="item.id">
			</el-option>
		</el-select>
	  </el-form-item>

	  <el-form-item class="flex mb-0 pl-3">
	    <el-button type="primary" @click="initHtml">查询</el-button>
	    <el-button @click="resetForm('search')">重置</el-button>
	  </el-form-item>
	</el-form>
</div>
<div class="bg-white p-3">
	<table class="table table-borderless" v-if="find.id">
		<tr>
			<td width="120" class="text-right text-secondary small">状态</td>
			<td> 
				<el-switch 
				v-model="find.status"
				active-color="#13ce66"
				inactive-color="#ff4949"
				:active-value="1"
				:inactive-value="0"
				@change="setAdsPositionStatus">
				</el-switch>
			</td>
		</tr>
		<tr>
			<td width="120" class="text-right text-secondary small">客户端</td>
			<td>{{find.app_name}}</td>
		</tr>
		<tr>
			<td width="120" class="text-right text-secondary small">广告位名称</td>
			<td>{{find.title}}</td>
		</tr>
		<tr>
			<td width="120" class="text-right text-secondary small">别名</td>
			<td>{{find.alias}}</td>
		</tr>
		<tr>
			<td width="120" class="text-right text-secondary small">时间</td>
			<td v-if="find.start_time||find.end_time"><span v-if="find.start_time">{{find.start_time}}开始</span><span v-if="find.start_time&&find.end_time">~</span><span v-if="find.end_time">{{find.end_time}}结束</span></td>
		</tr>
		<tr>
			<td width="120" class="text-right text-secondary small">建议尺寸</td>
			<td>{{find.width}} * {{find.height}} px</td>
		</tr>
		<tr>
			<td width="120" class="text-right text-secondary"></td>
			<td>
				<el-button type="success" size="mini"
				@click="window.open('/ads/add/'+find.id)">添加广告</el-button>
				<el-button type="primary" size="mini" 
				@click="window.open('/ads/editPosition/'+find.id)">编辑广告位</el-button>
				<el-button type="danger" size="mini"
				@click="delAdsPosition">删除该广告位</el-button>
			</td>
		</tr>
	</table>
	<div class="table-responsive">
		<el-table
			ref="tableList"
	      	:data="tableData"
    		v-loading="search.ajax"
    		style="width: 100%;"
    		header-cell-class-name="table-header-DDE6FB">
	      <el-table-column
	        prop="id"
	        label="ID"
	        width="60">
	      </el-table-column>
		  <el-table-column
	        prop="title"
	        label="客户端"
	       	min-width="120">
		      <template slot-scope="scope">
		      	<div>{{scope.row.app_name}}</div>
		      </template>
	      </el-table-column>
	      <el-table-column
	        prop="title"
	        label="广告位名称"
	       	min-width="200">
		      <template slot-scope="scope">
		      	<div class="text-secondary small">{{scope.row.ptitle}}</div>
		      </template>
	      </el-table-column>
	      <el-table-column
	        prop="col"
	        label="数量"
	        width="120">
		      <template slot-scope="scope">
				<el-input-number 
					v-model="scope.row.col" 
					@change="setAdsCol(scope.row)" 
					:step="1"
					step-strictly
					:min="1"
					:max="12"
					size="minism"></el-input-number>
		      </template>
	      </el-table-column>
	      <el-table-column
	        label="图片"
	        min-width="150">
		      <template slot-scope="scope">
				<el-image :key="scope.row.imgurl" :src="scope.row.imgurl" lazy :preview-src-list="[scope.row.imgurl]" style="max-width: 80px;max-height: 40px;">
			      <div slot="placeholder" class="font-files slot-font">
			      	<i class="el-icon-loading"></i>
			      </div>
			      <div slot="error" class="font-files text-secondary">
			        <i class="el-icon-picture-outline"></i>
			      </div>
				</el-image>
		      </template>
	      </el-table-column>
	      <el-table-column
	        label="链接"
	        width="200">
		      <template slot-scope="scope">
		      	<el-popover
				    placement="top-start"
				    width="600"
				    trigger="hover"
				    v-if="scope.row.url">
		      		<el-link type="info" :href="scope.row.url" target="_black" :underline="false">{{scope.row.url}}</el-link>
		      		<el-link type="primary" slot="reference" :underline="false">查看</el-link>
				</el-popover>
		      </template>
	      </el-table-column>
	      <el-table-column
	        prop="sort"
	        label="排序"
	        width="80">
	      </el-table-column>
	      <el-table-column
	        label="状态"
	        width="80">
		      <template slot-scope="scope">
		      	<transition>
		      		<el-button type="success" size="minism"
		      		v-if="scope.row.status==1 || scope.row.status==2" 
		      		@click="setAdsStatus(scope.row);" 
		      		:loading="scope.row.status==2">正常</el-button>
		      		<el-button type="info" size="minism" 
		      		v-else="scope.row.status==0 || scope.row.status==2" 
		      		@click="setAdsStatus(scope.row);" 
		      		:loading="scope.row.status==2">禁用</el-button>
				</transition>
		      </template>
	      </el-table-column>
	      <el-table-column
	        label="广告标识符"
	        width="120">
		      <template slot-scope="scope">
		      	<transition>
		      		<el-button type="success" size="minism"
		      		v-if="scope.row.ads_icon==1 || scope.row.ads_icon==2" 
		      		@click="setAdsIcon(scope.row);" 
		      		:loading="scope.row.ads_icon==2">有</el-button>
		      		<el-button type="info" size="minism" 
		      		v-else="scope.row.ads_icon==0 || scope.row.ads_icon==2" 
		      		@click="setAdsIcon(scope.row);" 
		      		:loading="scope.row.ads_icon==2">无</el-button>
				</transition>
		      </template>
	      </el-table-column>
		  <!--
	      <el-table-column
	        prop="start_time"
	        label="开始~结束时间"
	        width="240">
		      <template slot-scope="scope">
		      	<div class="flex small">
		          <div>{{ scope.row.start_time }}</div>
		          <div class="px-1" v-if="scope.row.end_time">~</div>
		          <div>{{ scope.row.end_time }}</div>
		      	</div>
		      </template>
	      </el-table-column>
		  -->
	      <el-table-column
	        label="创建/更新时间"
	        width="180">
		      <template slot-scope="scope">
		      	<div class="small">
		          <div>{{ scope.row.create_time }}</div>
		          <div>{{ scope.row.update_time }}</div>
		      	</div>
		      </template>
	      </el-table-column>
	      <el-table-column
	        label="/"
	        width="140">
		      <template slot-scope="scope">
		        <el-button
		            type="primary"
		            plain
		            round
		            size="minism"
		            @click="window.open('/ads/edit/'+scope.row.id)">
		            编辑
		        </el-button>
		        <el-button
		            type="danger"
		            plain
		            round
		            size="minism"
		            @click="delAds(scope.row.id,scope.$index);">
		            删除
		        </el-button>
		      </template>
	      </el-table-column>
	    </el-table>
	</div>
	<div class="table-responsive py-3 text-center">
		<el-pagination
		  background
	      @size-change="handleSizeChange"
	      @current-change="handleCurrentChange"
	      :current-page="search.page"
	      :page-sizes="[10,20,30]"
	      :page-size="search.pageSize"
	      layout="total, sizes, prev, pager, next, jumper"
	      :total="search.total">
	    </el-pagination>
	</div>
</div>
{/block}
{block name="script"}
<script type="text/javascript">
	{empty name="app_list"}
	var app_list=[];
	{else/}
	var app_list={:json_encode($app_list,JSON_UNESCAPED_UNICODE)};
	{/empty}
	{empty name="ads_position_list"}
	var ads_position_list=[];
	{else/}
	var ads_position_list={:json_encode($ads_position_list,JSON_UNESCAPED_UNICODE)};
	{/empty}
</script>
<script type="text/javascript">
	var vm=new Vue({
		el:'#app',
		data:{
			view:XYBase.view,
			find:{
				index:null,
				id:0,
				ttle:'',
				alias:'',
				start_time:'',
				end_time:'',
				status:0,
				update_time:'',
				create_time:'',
			},
			search:{
				app_id:null,
				id:'',
				ajax:false,
				page:1,
				total:0,
				pageSize:10
			},
			app_list:app_list,
			ads_position_list:ads_position_list,
			tableData:[]
		},
		watch:{
		    view:XYBase.viewWatch,
		},
		created(){
			XYBase.created(this);
			this.initHtml();
		},
		methods:{
	    	setAdsCol(data){
	    		$.getJSON('/ads/setAdsCol/'+data.id+'/'+data.col,function(ret){
	    			if (ret) {
	    				if (ret.code === 0) {
	    				}else{
	    					XYBase.msg(ret.msg);
					        setTimeout(function (argument) {window.location.reload(); },2000);
	    				}
	    			}else{
						XYBase.error(XYBase.config.system_network_error);
	    			}
	    		});
	    	},
			getAds(val){
				for (var i = 0; i < this.ads_position_list.length; i++) {
					if(this.ads_position_list[i].id===val){
						this.find=this.ads_position_list[i];
						this.find.index=i;
						break;
					}
				}
				this.search.id=val;
				this.search.page=1;
				this.initHtml();
			},
			setAdsPositionStatus(){
				var _this=this;
	    		if (_this.find.status==2) return;
	    		var status=_this.find.status,oldStatus=1;
	    		if (_this.find.status){
	    			oldStatus=0;
	    		}
	    		_this.find.status=2;
	    		$.getJSON('/ads/setAdsPositionStatus/'+_this.find.id+'/'+status,function(ret){
	    			_this.find.status=oldStatus;
	    			if (ret) {
	    				if (ret.code === 0) {
	    					_this.find.status=status;
	    					_this.find.start_time='';
	    					_this.find.end_time='';
	    				}else{
	    					XYBase.msg(ret.msg);
	    				}
	    			}else{
						XYBase.error(XYBase.config.system_network_error);
	    			}
	    		});
			},
			setAdsStatus(data){
	    		if (data.status==2) return;
	    		var status=1,oldStatus=data.status;
	    		if (data.status) status=0;
	    		data.status=2;
	    		$.getJSON('/ads/setAdsStatus/'+data.id+'/'+status,function(ret){
	    			data.status=oldStatus;
	    			if (ret) {
	    				if (ret.code === 0) {
	    					data.status=status;
	    					data.start_time='';
	    					data.end_time='';
	    				}else{
	    					XYBase.msg(ret.msg);
	    				}
	    			}else{
						XYBase.error(XYBase.config.system_network_error);
	    			}
	    		});
			},
			setAdsIcon(data){
	    		if (data.ads_icon==2) return;
	    		var ads_icon=1,oldStatus=data.ads_icon;
	    		if (data.ads_icon) ads_icon=0;
	    		data.ads_icon=2;
	    		$.getJSON('/ads/setAdsIcon/'+data.id+'/'+ads_icon,function(ret){
	    			data.ads_icon=oldStatus;
	    			if (ret) {
	    				if (ret.code === 0) {
	    					data.ads_icon=ads_icon;
	    				}else{
	    					XYBase.msg(ret.msg);
	    				}
	    			}else{
						XYBase.error(XYBase.config.system_network_error);
	    			}
	    		});
			},
			handleSizeChange(val) {
				this.search.page=1;
				this.search.pageSize=val;
	          	this.initHtml();
			},
			handleCurrentChange(val) {
				this.search.page=val;
	          	this.initHtml();
			},
			delAds(id,index) {
	      		var _this=this;
		        this.$confirm('是否确定删除ID为【'+id+'】的广告?', '提示', {
		          confirmButtonText: '删除',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
		    		const loading=XYBase.openloading();
		    		$.getJSON('/ads/del/'+id,function(ret){
		    			loading.close();
		    			if (ret) {
		    				if (ret.code === 0) {
		    					_this.tableData.splice(index,1);
		    				}else XYBase.msg(ret.msg);
		    			}else XYBase.error(XYBase.config.system_network_error);
		    		});
		        }).catch(() => {
					XYBase.msg('已取消');
		        });
			},
			delAdsPosition() {
	      		var _this=this;
		        this.$confirm('是否确定删除【'+_this.find.title+'】广告位?', '提示', {
		          confirmButtonText: '删除',
		          cancelButtonText: '取消',
		          type: 'warning'
		        }).then(() => {
		    		const loading=XYBase.openloading();
		    		$.getJSON('/ads/delPosition/'+_this.find.id,function(ret){
		    			loading.close();
		    			if (ret) {
		    				if (ret.code === 0) {
		    					_this.ads_position_list.splice(_this.find.index,1);
		    					_this.find={
									index:null,
									id:0,
									ttle:'',
									alias:'',
									start_time:'',
									end_time:'',
									status:0,
									update_time:'',
									create_time:'',
								};
								_this.tableData=[];
		    				}else XYBase.msg(ret.msg);
		    			}else XYBase.error(XYBase.config.system_network_error);
		    		});
		        }).catch(() => {
					XYBase.msg('已取消');
		        });
			},
	      	initHtml() {
	      		var _this=this;
	      		if (_this.search.ajax)return;
	      		_this.search.ajax=true;
	      		_this.tableData=[];
				$.ajax({
					url:'',
					type:'get',
					data:_this.search,
					dataType:'json',
					error:function(err){
	      				_this.search.ajax=false;
						XYBase.error(XYBase.config.system_network_error);
					},
					success:function(ret){
	      				_this.search.ajax=false;
						if (ret) {
							if (ret.code === 0) {
								_this.search.total=ret.data.total;
								_this.tableData=ret.data.data;
							}else{
								XYBase.msg(ret.msg);
							}
						}else{
							XYBase.error(XYBase.config.system_network_error);
						}
					}
				});
			}
		}
	});
</script>
{/block}